<template>
<div class="scroll-container">
    <header class="header">
        <div class="header-content">
            <div class="header-left">
                <a href="#" @click="GoBack()" class="back-btn">
                    <svg t="1751614585251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" 
                        p-id="1471" width="20" height="20">
                        <path d="M790.865959 73.216062 322.123178 512.062492l468.74278 438.746442c16.397998 16.697962 16.397998 43.894642 0 60.592603-16.397998 16.697962-42.894764 16.697962-59.292762 0l-498.839107-466.943c-8.698938-8.898914-12.398487-20.797461-11.898548-32.496033-0.599927-11.698572 3.099622-23.497132 11.898548-32.496033l498.839107-466.943c16.397998-16.697962 42.894764-16.697962 59.292762 0C807.263957 29.421409 807.263957 56.518101 790.865959 73.216062z" 
                            fill="#272636" 
                            p-id="1472">
                        </path>
                    </svg>
                </a>
                <div class="header-title">用户主页</div>
            </div>
            <div class="header-actions">
                <span @click="isShowPopup=true" class="action-btn">⋯</span>
            </div>
        </div>
    </header>

    <main class="main-content">
        <!--个人信息头部-->
        <div class="profile-header">
            <!--基础信息-->
            <div class="basic-info">
                <div class="avatar" :style="{ backgroundImage: userProfile.avatarUrl ? `url(${userProfile.avatarUrl})` : '' }">
                    {{ userProfile?.avatarUrl ? '' : userProfile?.username?.charAt(0) }}
                </div>
                <div class="user-basic">
                    <div class="username">{{ userProfile?.username || '' }}</div>
                    <div v-if="userProfile?.id != '-1'" class="user-id"> @{{ userProfile?.id || '' }}</div>
                    <div class="location">📍IP所属地： {{ userProfile?.location || '未知' }}</div>
                </div>
            </div>
            <div class="bio">{{ userProfile.bio || '这个人很懒，还没有填写个人简介' }}</div>
            
            <!--数据信息-->
            <div class="data-info">
                <!--统计信息-->
                <div class="stats">
                    <div class="stat-item">
                        <div class="stat-number">{{ formatNumber(userProfile.postsCount) }}</div>
                        <div class="stat-label">作品</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">{{ formatNumber(userProfile.followersCount) }}</div>
                        <div class="stat-label">粉丝</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">{{ formatNumber(userProfile.followingCount) }}</div>
                        <div class="stat-label">关注</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">{{ formatNumber(156243) }}</div>
                        <div class="stat-label">获赞</div>
                    </div>
                </div>

                <!--操作按钮-->
                <div v-if="user_Store.userInfo?.id && userProfile.id &&  user_Store.userInfo?.id != userProfile.id" class="action-buttons">
                    <button v-if="!isFollowing" @click="toggleFollow(userProfile.id, true)" class="btn" :class="isFollowing ? 'btn-secondary' : 'btn-primary'">
                        关注
                    </button>
                    <button v-else @click="toggleFollow(userProfile.id, false)" class="btn" :class="isFollowing ? 'btn-secondary' : 'btn-primary'">
                        已关注
                    </button>
                    <button @click="GoToPrivateChat(userProfile.id)" class="btn btn-secondary">私信</button>
                </div>
            </div>
        </div>
        
        <!--标签选择-->
        <div class="content-tabs">
            <div class="tab" :class="{'active': activeTab == 'posts'}" @click="switchTab('posts')">作品</div>
            <div class="tab" :class="{'active': activeTab == 'likes'}" @click="switchTab('likes')">点赞</div>
            <div class="tab" :class="{'active': activeTab == 'collections'}" @click="switchTab('collections')">收藏</div>
        </div>
        
        <!--作品列表-->
        <div id="posts-content" v-show="activeTab == 'posts'" class="content-grid">
            <div v-for="work in workList" class="grid-item" @click="GoToDetail(work.id)"
                 :style="work.imageUrlList && work.imageUrlList.length > 0 ? { backgroundImage: `url(${work.imageUrlList[0]})`, backgroundSize: 'cover', backgroundPosition: 'center' } : { backgroundColor: generateBackgroundColor(work.title, work.userId) }">
                <div class="overlay">
                    <div class="post-title">{{ work.title }}</div>
                    <div class="like-status" style="font-size: 12px;">
                        <span>❤️ {{ formatNumber(work.likesCount) }}</span>
                    </div>
                </div>
            </div>
            
            <!-- 加载更多提示 -->
            <div ref="viewFlagBox_works" class="load-more-container">
                <div v-if="!isHasMoreWorks && !loading_works" class="no-more-tip">已经到底了~</div>
                <div v-else-if="loading_works" class="loading-tip">加载中...</div>
            </div>
        </div>
        
        <!-- 点赞列表 -->
        <div id="likes-content" v-show="activeTab == 'likes'" class="list-view">
            <div class="list-item" onclick="location.href='detail.html'">
                <div class="list-item-header">
                    <div class="list-item-avatar"></div>
                    <div class="list-item-info">
                        <div class="list-item-name">旅行小姐姐</div>
                        <div class="list-item-time">2天前</div>
                    </div>
                </div>
                <div class="list-item-content">三亚五天四夜攻略，人均2000玩转海南</div>
                <div class="list-item-images">
                    <div class="list-item-image">海滩</div>
                    <div class="list-item-image">酒店</div>
                    <div class="list-item-image">美食</div>
                </div>
                <div class="list-item-stats">
                    <span>❤️ 2.5k</span>
                    <span>💬 156</span>
                    <span>⭐ 89</span>
                </div>
            </div>
            
            <div class="list-item" onclick="location.href='detail.html'">
                <div class="list-item-header">
                    <div class="list-item-avatar"></div>
                    <div class="list-item-info">
                        <div class="list-item-name">时尚博主</div>
                        <div class="list-item-time">3天前</div>
                    </div>
                </div>
                <div class="list-item-content">秋季穿搭指南，这样搭配显瘦又时髦</div>
                <div class="list-item-images">
                    <div class="list-item-image">穿搭1</div>
                    <div class="list-item-image">穿搭2</div>
                    <div class="list-item-image">穿搭3</div>
                </div>
                <div class="list-item-stats">
                    <span>❤️ 3.1k</span>
                    <span>💬 234</span>
                    <span>⭐ 156</span>
                </div>
            </div>
        </div>
        
        <!--收藏列表-->
        <div id="collections-content" v-show="activeTab == 'collections'" class="list-view">
            <div class="list-item" onclick="location.href='detail.html'">
                <div class="list-item-header">
                    <div class="list-item-avatar"></div>
                    <div class="list-item-info">
                        <div class="list-item-name">生活家</div>
                        <div class="list-item-time">1周前</div>
                    </div>
                </div>
                <div class="list-item-content">居家收纳小技巧，让你的房间瞬间整洁</div>
                <div class="list-item-images">
                    <div class="list-item-image">收纳1</div>
                    <div class="list-item-image">收纳2</div>
                    <div class="list-item-image">收纳3</div>
                </div>
                <div class="list-item-stats">
                    <span>❤️ 1.8k</span>
                    <span>💬 92</span>
                    <span>⭐ 234</span>
                </div>
            </div>
            
            <div class="list-item" onclick="location.href='detail.html'">
                <div class="list-item-header">
                    <div class="list-item-avatar"></div>
                    <div class="list-item-info">
                        <div class="list-item-name">健身教练</div>
                        <div class="list-item-time">2周前</div>
                    </div>
                </div>
                <div class="list-item-content">在家也能练出马甲线，这套动作超有效</div>
                <div class="list-item-images">
                    <div class="list-item-image">健身1</div>
                    <div class="list-item-image">健身2</div>
                    <div class="list-item-image">健身3</div>
                </div>
                <div class="list-item-stats">
                    <span>❤️ 2.9k</span>
                    <span>💬 178</span>
                    <span>⭐ 345</span>
                </div>
            </div>
        </div>
    </main>

    <!-- 弹出框 -->
    <van-popup v-model:show="isShowPopup" position="bottom" closeable :style="{ height: '20%' }" style="display: flex">
        <div class="popup-content">
            <div class="popup-btn" @click="handelBlockClick()">
                <svg t="1761546385543" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4668" width="50" height="50">
                    <path d="M1267.579259 663.324444c-19.531852 46.26963-47.597037 87.798519-83.247407 123.448889-35.65037 35.65037-77.179259 63.620741-123.448889 83.247408-47.881481 20.29037-98.702222 30.53037-151.134815 30.53037-52.432593 0-103.253333-10.24-151.134815-30.53037-46.26963-19.531852-87.798519-47.597037-123.448889-83.247408-35.65037-35.65037-63.620741-77.179259-83.247407-123.448889-20.29037-47.881481-30.53037-98.702222-30.53037-151.134814 0-52.432593 10.24-103.253333 30.53037-151.134815 19.531852-46.26963 47.597037-87.798519 83.247407-123.448889 35.65037-35.65037 77.179259-63.620741 123.448889-83.247407 47.881481-20.29037 98.702222-30.53037 151.134815-30.530371 52.432593 0 103.253333 10.24 151.134815 30.530371 46.26963 19.531852 87.798519 47.597037 123.448889 83.247407 35.65037 35.65037 63.620741 77.179259 83.247407 123.448889 20.29037 47.881481 30.53037 98.702222 30.530371 151.134815 0 52.337778-10.334815 103.253333-30.530371 151.134814z m-232.106666-448.853333c-39.822222-16.877037-82.10963-25.41037-125.724445-25.41037s-85.902222 8.533333-125.724444 25.41037c-28.34963 11.946667-54.613333 27.875556-78.411852 47.312593l454.447407 454.447407c19.437037-23.703704 35.271111-50.062222 47.312593-78.411852 16.877037-39.822222 25.41037-82.10963 25.41037-125.724444s-8.533333-85.902222-25.41037-125.724445c-16.213333-38.494815-39.537778-73.007407-69.214815-102.684444-29.771852-29.582222-64.284444-52.906667-102.684444-69.214815zM784.023704 809.718519c39.822222 16.877037 82.10963 25.41037 125.724444 25.41037s85.902222-8.533333 125.724445-25.41037c28.34963-11.946667 54.613333-27.875556 78.411851-47.312593L659.437037 308.053333c-19.437037 23.703704-35.271111 50.062222-47.312593 78.411852-16.877037 39.822222-25.41037 82.10963-25.41037 125.724445s8.533333 85.902222 25.41037 125.724444c16.213333 38.494815 39.537778 73.007407 69.214815 102.684445 29.677037 29.582222 64.284444 52.811852 102.684445 69.12z m0 0" 
                        fill="#6B7487" p-id="4669">
                    </path>
                </svg>
                <span v-if="isBlocking" class="popup-btn-text">取消拉黑</span>
                <span v-else class="popup-btn-text">拉黑</span>
            </div>
        </div>
    </van-popup>
        

</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router'
import api from '@/api/index.js'
import { formatNumber } from '@/utils/format.js'
import { generateBackgroundColor } from '@/utils/imageBackground.js'
import { UserInfoStore } from '@/stores/userInfoStore'
import { TipStore } from '@/stores/tipStore'

const router = useRouter()
const route = useRoute()
const user_Store = UserInfoStore()
const tip_Store = TipStore()

// #region 基础数据
// 用户信息
const userProfile = ref({
  id: '',
  username: '',
  avatarUrl: '',
  bio: '',
  location: '',
  postsCount: 0,
  followersCount: 0,
  followingCount: 0,
  likesCount: 0
})

// 关注状态
const isFollowing = ref(false)

// 拉黑状态
const isBlocking = ref(false)

// 切换关注状态
const toggleFollow = async (fid, is_follow: boolean) => {
    if (!user_Store.userInfo?.id) {
        tip_Store.warningTip('请先登录')
        return
    }
    if(!fid) { return  }
  
  try {
    // 调用关注/取消关注API
    await api.Follow_follow(user_Store.userInfo.id, fid, is_follow)
    isFollowing.value = !isFollowing.value
    
    // 更新粉丝数
    if (isFollowing.value) {
      userProfile.value.followersCount += 1
    } else {
      userProfile.value.followersCount -= 1
    }
  } catch (error) {
    console.error('关注操作失败:', error)
  }
}
// #endregion


// #region 加载更多功能
let observer_works = null // IntersectionObserver 实例

// 初始化 IntersectionObserver
function initObserver() {
  observer_works = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting && activeTab.value === 'posts') {
        console.log('作品列表进入视图，加载更多数据！')
        loadMoreWorks()
      }
    })
  }, {
    threshold: 0, // 当元素哪怕有1像素进入视图时触发
    rootMargin: '0px'
  })

  if (viewFlagBox_works.value) {
    observer_works.observe(viewFlagBox_works.value)
  }
}

// 清理 IntersectionObserver
function cleanupObserver() {
  if (observer_works) {
    observer_works.disconnect()
    observer_works = null
  }
}

// 加载更多作品
const loadMoreWorks = async () => {
  if (!isHasMoreWorks.value || loading_works.value) {
    return
  }
  
  try {
    loading_works.value = true
    current_works.value += 1 // 下一页
    
    const worksRes = await api.Post_GetByUserId(userProfile.value.id, current_works.value, size_works.value)
    

    if (!worksRes.data.data.list || worksRes.data.data.list.length < size_works.value) {
      isHasMoreWorks.value = false // 没有更多数据了
    }
    
    // 追加新数据到现有列表
    workList.value = [...workList.value, ...worksRes.data.data.list]
    
  } catch (error) {
    console.error('加载更多作品失败:', error)
    tip_Store.errorTip('加载失败')
  } finally {
    loading_works.value = false
  }
}
// #endregion


// #region 帖子展示
// 作品
const current_works = ref(1)
const size_works = ref(10)
const finished_works = ref(false)
const loading_works = ref(true)
const workList = ref([])
const isHasMoreWorks = ref(true) // 是否还有更多作品数据
const viewFlagBox_works = ref(null) // 作品列表加载更多监听元素

// 点赞
const current_like = ref(1)
const size_like = ref(10)
const finished_like = ref(false)
const loading_like = ref(true)
const likeList = ref([])

// 收藏
const current_favorite = ref(1)
const size_favorite = ref(10)
const finished_favorite = ref(false)
const loading_favorite = ref(true)
const favoriteList = ref([])
// #endregion


// #region 切换标签
const activeTab = ref('posts')
function switchTab(tab : string) {
  activeTab.value = tab
  
  // 当切换到作品标签时，重新初始化观察者
  if (tab === 'posts') {
    nextTick(() => {
      cleanupObserver()
      initObserver()
    })
  }
}
// #endregion


// #region 辅助函数
// 返回
function GoBack() {
    router.go(-1)
}

// 跳转详情页
function GoToDetail(opusId){
    router.push({
        path: '/OpusDetail',
        query: { id: opusId },
    });
}

// 跳转私信
async function GoToPrivateChat (talkerId){
    router.push({
        path: '/chat',
        query: { 
            talkerId, 
        }
    })
}

// #endregion


// #region 更多操作
const isShowPopup = ref(false)

// 拉黑
const handelBlockClick = async () => {
    if (!user_Store.userInfo?.id) {
        tip_Store.warningTip('请先登录')
        return
    }

    // 判断是加入还是移除黑名单
    try{
        if (isBlocking.value) { // 移除
            let res = await api.Blacklist_remove(userProfile.value.id)
            if(res.data.code != 1){
                tip_Store.errorTip(res.data.msg)
                return
            }
            tip_Store.successTip('移除成功')
            isBlocking.value = false
        }
        else { // 加入
            let res = await api.Blacklist_add(userProfile.value.id)
            if(res.data.code != 1){
                tip_Store.errorTip(res.data.msg)
                return
            }
            tip_Store.successTip('拉黑成功')
            isBlocking.value = true
        }
    }
    finally{
        isShowPopup.value = false
    }
}

// #endregion


// #region 获取数据
// 获取用户信息
const getUserInfo = async (uid) => { 
    const userRes = await api.User_GetById_ProfileQuery(uid)
    userProfile.value = userRes.data.data
};

// 查看是否关注了该用户
const isFollow = async() => {
    if(!user_Store.userInfo?.id){ return } // 未登录
    if(userProfile.value.id){
        const res = await api.Follow_isFollow(user_Store.userInfo.id, userProfile.value.id)
        isFollowing.value = res.data.data
    }
}

// 查询是否拉黑了该用户
const isBlocked = async() => {
    if(!user_Store.userInfo?.id){ return } // 未登录
    if(userProfile.value.id){
        const res = await api.Blacklist_isBlocked(userProfile.value.id)
        isBlocking.value = res.data.data
    }
}

// 获取作品列表
const getWorks = async (uid) => { 
    try {
        loading_works.value = true
        const worksRes = await api.Post_GetByUserId(uid, current_works.value, size_works.value)
        
        // 检查是否还有更多数据
        if (!worksRes.data.data.list || worksRes.data.data.list.length < size_works.value) {
            isHasMoreWorks.value = false
        }
        
        workList.value = worksRes.data.data.list
        
    } catch (error) {
        console.error('获取作品列表失败:', error)
        tip_Store.errorTip('获取数据失败')
    } finally {
        loading_works.value = false
    }
}

// #endregion


onMounted(async ()=>{
    // 获取路由参数中的uid
    const uid = Array.isArray(route.query.uid) ? route.query.uid[0] : route.query.uid

    if (!uid) {
      alert('参数错误')
      router.go(-1)
      return
    }
    
    try {
        // 获取用户信息
        await getUserInfo(uid)
      
        // 查询是否已关注该用户
        isFollow()

        // 查询是否拉黑了该用户
        isBlocked()
      
        // 获取作品列表
        await getWorks(uid)

    } catch (error) {
        console.error('获取数据出错:', error)
    }
    
    // 初始化 IntersectionObserver
    nextTick(() => {
        initObserver()
    })
})

// 组件卸载时清理观察者
onBeforeRouteLeave(() => {
    cleanupObserver()
})

</script>

<style lang="scss" scoped>
.scroll-container {
    height: 100vh;
    overflow-y: auto; /* 允许垂直滚动 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}


/* #region 头部 */
.header {
    background: white;
    padding: 10px 15px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.08);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.back-btn {
    font-size: 20px;
    cursor: pointer;
    text-decoration: none;
    color: #333;
    display: flex;
    align-items: center;
}

.header-title {
    font-size: 16px;
    font-weight: 500;
}

.header-actions {
    display: flex;
    gap: 15px;
}

.action-btn {
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    color: #666;
}
/* #endregion 头部结束 */


/* #region 内容区域 */
.main-content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.profile-header {
    background: white;
    padding: 20px 15px 5px 15px;
}

.basic-info {
    display: flex;
    align-items: center;
}

.avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff6b6b, #ffa500);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.user-basic{
    margin-left: 16px;
    width: 100%;
}

.username {
    font-size: 18px;
    font-weight: 600;
}

.user-id {
    color: #999;
    font-size: 12px;
    margin-top: 8px;
}

.location {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
}

.bio {
    color: #666;
    margin-top: 16px;
    font-size: 14px;
    line-height: 140%;
    white-space: pre-line;
}

.data-info{
    display: flex;
    justify-content: space-between;
}

.stats {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 15px;
}
.stat-item {
    text-align: center;
    cursor: pointer;
}
.stat-number {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
.stat-label {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.action-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.btn {
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all 0.3s;
}

.btn-primary {
    background: #ff6b6b;
    color: white;
    border: none;
    height: 32px;
}
.btn-primary:hover {
    background: #ff8b8b;
}

.btn-secondary {
    background: white;
    color: #666;
    border: 1px solid #ddd;
    height: 32px;
}
.btn-secondary:hover {
    background: #f5f5f5;
}

.content-tabs {
    background: white;
    display: flex;
    border-bottom: 1px solid #f0f0f0;
}

.tab {
    flex: 1;
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    color: #666;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.tab.active {
    color: #ff6b6b;
    border-bottom-color: #ff6b6b;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 2px;
    padding: 15px 10px;
}

.grid-item {
    aspect-ratio: 1;
    // background: linear-gradient(45deg, #ff9a9e, #fecfef);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.3s;
    position: relative;
    overflow: hidden;
}

.grid-item:hover {
    transform: scale(1.05);
}

.grid-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(193,86,86,0.6));
    padding: 10px 8px 8px;
    color: white;
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grid-item .post-title {
    font-size: 12px;
    font-weight: 500;
    flex: 1;
    text-align: left;
    line-height: 1.6;
    margin-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-item .stats {
    display: flex;
    gap: 8px;
    font-size: 10px;
    text-align: right;
    flex-shrink: 0;
}

.list-view {
    padding: 15px 10px;
}

.list-item {
    background: white;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
    cursor: pointer;
}

.list-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.list-item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff6b6b, #ffa500);
}

.list-item-info {
    flex: 1;
}

.list-item-name {
    font-weight: 500;
    font-size: 14px;
}

.list-item-time {
    font-size: 12px;
    color: #999;
}

.list-item-content {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.list-item-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.list-item-image {
    aspect-ratio: 1;
    background: linear-gradient(45deg, #ff9a9e, #fecfef);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
}

.list-item-stats {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #999;
}
/* #endregion 内容区域结束 */


/* 加载更多样式 */
.load-more-container {
    grid-column: 1 / -1;
    padding: 20px 0;
    text-align: center;
}

.no-more-tip {
    font-size: 12px;
    color: #999;
    padding: 10px;
}

.loading-tip {
    font-size: 12px;
    color: #666;
    padding: 10px;
}


@media (min-width: 350px) and (max-width: 400px) {
  .content-grid {
    grid-template-columns: repeat(2, 1fr); /* 两列等宽 */
  }
}


/* #region 弹出框 */
.van-popup.van-popup--bottom {
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
}
.popup-content{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.popup-btn{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}
.popup-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.popup-icon{
    width: 24px;
    height: 24px;
}
.popup-btn-text{
    position: absolute;
    font-size: 12px;
    color: #676767;
    bottom: -24px;
}
/* #endregion 弹出框结束 */

</style>